<template>
	<view class="swiper" @touchmove="swiperMove" @touchend="swiperUp" @touchstart="swiperDown">
		<view
			class="swiper-container"
			:style="{
				position: 'absolute',
				transform: 'translate(' + percentX + '%, 0px) translateZ(0px)',
				transitionDuration: (swiperAnimation ? duration / 1000 : 0) + 's'
			}"
		>
			<view
				class="swiper-item"
				v-for="(item, index) in contentList"
				:key="item + index"
				:style="{
					position: 'absolute',
					transform: 'translate(' + postionList[index] + '%, 0px) translateZ(0px)'
				}"
			>
				<slot v-if="item.show" :row="data[item.index]" :index="item.index"></slot>
			</view>
		</view>
	</view>
</template>

<script>
//	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
let systemInfo = uni.getSystemInfoSync();
let windowWidth = systemInfo.windowWidth;
let windowHeight = systemInfo.windowHeight;
let x = 0;
let y = 0;
let animateTimer = 0;
export default {
	props: {
		rtl: {
			type: Boolean,
			default: false
		},
		data: {
			type: Array
		},
		title: {
			type: String
		},
		duration: {
			type: Number,
			default: 1000
		}
	},
	data() {
		return {
			currentIndex: 0,
			percentX: 0,
			percentY: 0,
			swiperAnimation: true,
			postionList: [-100, 0, 100],
			contentList: [{ show: false, index: -1 }, { show: true, index: 0 }, { show: false, index: 1 }],
			lastTimeStamp: 0,
			lockMove: false //锁定页面
		};
	},
	mounted() {
		this.setPage(1);
		// setInterval(()=>{
		// 	this.nextPage()
		// },1500)
	},
	methods: {
		swiperMove(e) {
			if (this.lockMove) return;
			var touche = e.touches[0];
			this.lastTimeStamp = e.timeStamp;
			if (!touche) return; // console.log('move')

			var clientX = touche.clientX;
			var clientY = touche.clientY;
			this.percentX = ((clientX - x) * 100) / windowWidth;
			this.percentY = ((clientY - y) * 100) / windowHeight;
		},
		swiperDown(e) {
			if (this.lockMove) return;
			this.swiperAnimation = false;
			let touche = e.touches[0];
			if (!touche) return;
			x = touche.clientX;
			y = touche.clientY;
			// this.pageMovement(e);
		},
		swiperUp(e) {
			if (this.lockMove) return;
			this.lockMove = true;
			this.pageMovement(e);
		},
		//翻页
		pageMovement(e) {
			var absY = Math.abs(this.percentY);
			var absX = Math.abs(this.percentX);
			if (absY > 2 && absX < 1) {
				this.initPage();
				return;
			}
			let time = e.timeStamp - this.lastTimeStamp;
			if (this.percentX >= 40 || (time > 0 && this.percentX >= 10)) {
				this.leftPage();
			} else if (this.percentX <= -40 || (time > 0 && this.percentX <= -10)) {
				this.rightPage();
			} else {
				this.initPage();
			}
		},
		//打开指定页面
		setPage(current) {
			if (this.data.length > 0) {
				this.currentIndex = current;
				this.contentList[1] = {
					index: this.currentIndex,
					show: true
				};
				this.swiperAnimation = false;
				this.setContent();
			}
		},
		//不翻页
		initPage() {
			// this.swiperAnimation = true;
			this.percentX = 0;
			this.lockMove = false;
		},
		//翻上一页
		nextPage() {
			if (this.rtl) this.leftPage();
			else this.rightPage();
		},
		rightPage() {
			console.log('right');
			this.swiperAnimation = true;
			if (this.contentList[2].show === false) {
				this.initPage();
				return;
			}
			this.percentX = -100;
			clearTimeout(animateTimer);
			animateTimer = setTimeout(() => {
				this.swiperAnimation = false;
				this.contentList.push(this.contentList.shift());
				if (this.rtl) this.setPrevContent();
				else this.setNextContent();
				this.percentX = 0;
				this.lockMove = false;
			}, this.duration);
		},
		//翻下一页
		prevPage() {
			if (this.rtl) this.rightPage();
			else this.leftPage();
		},
		leftPage() {
			console.log('left');
			this.swiperAnimation = true;
			if (this.contentList[0].show === false) {
				this.initPage();
				return;
			}
			this.percentX = 100;
			clearTimeout(animateTimer);
			animateTimer = setTimeout(() => {
				this.swiperAnimation = false;
				this.contentList.unshift(this.contentList.pop());
				if (this.rtl) this.setNextContent();
				else this.setPrevContent();
				this.percentX = 0;
				this.lockMove = false;
			}, this.duration);
		},
		setNextContent() {
			this.currentIndex++;
			this.setContent();
		},
		setPrevContent() {
			this.currentIndex--;
			this.setContent();
		},
		setContent() {
			for (var i of [0, 2]) {
				let index = this.currentIndex + i - 1;
				let show = true;
				let count = this.data.length;
				if (index < 0) {
					//index = count - 1
					show = false;
				}
				if (index > count - 1) {
					//index = 0
					show = false;
				}
				this.contentList[this.rtl ? 2 - i : i] = {
					show,
					index
				};
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.swiper {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	.swiper-container {
		width: 100%;
		height: 100%;
		.swiper-item {
			transition-timing-function: ease-out;
			position: absolute;
			width: 100%;
			height: 100%;
		}
	}
}
</style>
